<template>
  <div class="rank">
    <div class="banner"></div>
    <ul class="list">
      <li class="item" v-for="(item, index) in hot" :key="item.id">
        <a class="link" :href="item.url ? item.url:'javascript;'">
          <em class="index">{{index + 1}}</em>
          <span class="title">{{item.title}}</span>
          <span class="point">{{item.viewCount}}</span>
          <svg
            class="right icon"
            t="1585196975632"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="6132"
            width="32px"
            height="32px"
          >
            <path
              d="M337.066667 938.666667c12.8 0 25.6-4.266667 34.133333-12.8l384-384c17.066667-17.066667 17.066667-42.666667 0-59.733334l-384-384c-8.533333-8.533333-21.333333-12.8-34.133333-12.8-38.4 0-59.733333 46.933333-29.866667 76.8l349.866667 349.866667-349.866667 349.866667c-29.866667 29.866667-8.533333 76.8 29.866667 76.8z"
              p-id="6133"
              fill="#949494"
            />
          </svg>
        </a>
      </li>
    </ul>

    <div class="ads" v-if="banner.data" :style="'height: '+ bannerHeight + 'px'">
      <mt-swipe :auto="4000">
        <mt-swipe-item v-for="(item, index) in banner.data" :key="index">
            <a :href="item.linkurl ? item.linkurl:'javascript;'"><img class="adimg" :src="item.imageurl" @load="loadImg(item.imageurl)"></a>
        </mt-swipe-item>
      </mt-swipe>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Swipe, SwipeItem } from "mint-ui";
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
import adItem from "@/compoents/adItem";
export default {
  name: "rank",
  data() {
    return {
        hot: [],
        banner: {},
        bannerHeight: 0,
    };
  },
  components: {
    adItem
  },
  mounted() {
    this.getData()
  },
  computed: {},
  watch: {},
  methods: {
    loadImg(e){
        let dom = document.querySelector(".ads")
        console.log(dom, dom.clientWidth)
        let img = new Image()
        img.src = e
        img.onload = () => {
            let r = img.height / img.width
            this.bannerHeight = r * dom.clientWidth
        }
    },
    getData() {
      this.$store.dispatch("rank", {}).then(res => {
        console.log("rank", res)
        let {hot,banner} = res.data
        this.hot = hot
        this.banner = banner
      });
    }
  }
};
</script>



<style lang="scss" scope>
.rank {
  width: 100%;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  a{
      text-decoration: unset;
  }
  .banner {
    width: 100%;
    height: 308px;
    background: url();
    background-size: contain;
  }
  .list {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    .item {
      display: flex;
      height: 108px;
      margin: 0;
      .link {
        height: 100%;
        width: 100%;
        display: flex;
        border-bottom: 1px solid #f2f2f2;
        align-items: center;
        padding: 0 40px;
        position: relative;
        .index {
          color: #949494;
          font-size: 24px;
          font-style: normal;
          text-decoration: none;
        }
        .title {
          max-width: 450px;
          color: #585858;
          font-size: 32px;
          margin-left: 30px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .point {
          color: #8d8d8d;
          font-size: 18px;
          margin-left: 22px;
        }
        .right {
          color: #949494;
          height: 19px;
          width: 19px;
          position: absolute;
          right: 40px;
        }
      }
      &:nth-child(1),
      &:nth-child(2),
      &:nth-child(3) {
        .index {
          color: #e8323f;
        }
      }
      &:last-child{
        .link{
            border-bottom: none;
        }
      }
    }
  }
  .ads{
    min-height: 50px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
    margin-bottom: 20px;
    // background: #e8323f;
    .adimg{
        width: 100%;
        height: 100%;
        object-fit: cover;
        background: #8d8d8d;
    }
  }
}
</style>
